---
import "../styles/global.css";
import { SEO } from "astro-seo";
import { ClientRouter } from "astro:transitions";
import { Font } from "astro:assets";
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <Font cssVariable="--font-rajdhani" />
    <Font cssVariable="--font-inter" />
    <SEO
      title={Astro.props.title
        ? `${Astro.props.title} - Ferron`
        : "Ferron - a fast, memory-safe web server written in Rust"}
      description={Astro.props.description}
      openGraph={{
        basic: {
          title: Astro.props.title
            ? `${Astro.props.title} - Ferron`
            : "Ferron - a fast, memory-safe web server written in Rust",
          type: "website",
          image: `${Astro.url.origin}${Astro.props.image || "/opengraph.png"}`
        },
        optional: {
          description: Astro.props.description
        }
      }}
      twitter={{
        card: "summary_large_image",
        site: "@ferron_web",
        title: Astro.props.title
          ? `${Astro.props.title} - Ferron`
          : "Ferron - a fast, memory-safe web server written in Rust",
        image: `${Astro.url.origin}${Astro.props.image || "/opengraph.png"}`,
        description: Astro.props.description
      }}
    />
    <ClientRouter />
  </head>
  <body class="flex flex-col min-h-screen">
    <slot />
  </body>
</html>

<script>
  import Plausible from "plausible-tracker";

  const plausible = Plausible({
    domain: "v1.ferron.sh",
    apiHost: "https://analytics.ferron.sh"
  });

  plausible.trackPageview();
  plausible.enableAutoOutboundTracking();

  window.plausible = plausible;

  document.addEventListener("astro:after-swap", () => {
    // Track page view
    plausible.trackPageview();
  });
</script>
